import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Line } from '@ant-design/plots';

const DemoLine = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    asyncFetch();
  }, []);

  const asyncFetch = () => {
    setData([

      {
        "yr": "2017",
        "plat_base_level": "国家级教学成果奖",
        "count": 70
      },

      {
        "yr": "2018",
        "plat_base_level": "国家级教学成果奖",
        "count": 85
      },

      {
        "yr": "2019",
        "plat_base_level": "国家级教学成果奖",
        "count": 101
      },

      {
        "yr": "2020",
        "plat_base_level": "国家级教学成果奖",
        "count": 132
      },

      {
        "yr": "2021",
        "plat_base_level": "国家级教学成果奖",
        "count": 154
      },

      {
        "yr": "2017",
        "plat_base_level": "省级教学成果奖",
        "count": 197
      },

      {
        "yr": "2018",
        "plat_base_level": "省级教学成果奖",
        "count": 210
      },
      {
        "yr": "2019",
        "plat_base_level": "省级教学成果奖",
        "count": 240
      },

      {
        "yr": "2020",
        "plat_base_level": "省级教学成果奖",
        "count": 280
      },

      {
        "yr": "2021",
        "plat_base_level": "省级教学成果奖",
        "count": 333
      },

      {
        "yr": "2017",
        "plat_base_level": "国家级一流课程",
        "count": 88
      },

      {
        "yr": "2018",
        "plat_base_level": "国家级一流课程",
        "count": 92
      },
      {
        "yr": "2019",
        "plat_base_level": "国家级一流课程",
        "count": 101
      },

      {
        "yr": "2020",
        "plat_base_level": "国家级一流课程",
        "count": 110
      },

      {
        "yr": "2021",
        "plat_base_level": "国家级一流课程",
        "count": 114
      },

      {
        "yr": "2017",
        "plat_base_level": "省级一流课程",
        "count": 170
      },

      {
        "yr": "2018",
        "plat_base_level": "省级一流课程",
        "count": 205
      },

      {
        "yr": "2019",
        "plat_base_level": "省级一流课程",
        "count": 245
      },

      {
        "yr": "2020",
        "plat_base_level": "省级一流课程",
        "count": 280
      },

      {
        "yr": "2021",
        "plat_base_level": "省级一流课程",
        "count": 400
      },
    ])
  };
  const config = {
    data,
    xField: 'yr',
    yField: 'count',
    seriesField: 'plat_base_level',
  };

  return <Line {...config} />;
};

export default DemoLine
